<template>
	<view class="login">
		<view style="height: 20rpx;"></view>
		<view class="login-cont">
			<u-form :model="form" ref="uForm" :rules="rules" labelPosition="left" labelWidth='80'>
				<view class="mine-cell-child"></view>
				<u-form-item label="旧密码" borderBottom prop="form.oldpassword">
					<u-input v-model="form.oldpassword" placeholder="请输入旧密码" border='none' password />
				</u-form-item>
				<view class="mine-cell-child"></view>
				<u-form-item label="新密码" borderBottom prop="form.password">
					<u-input v-model="form.password" placeholder="请输入新密码" border='none' password />
				</u-form-item>
				<view class="mine-cell-child"></view>
				<u-form-item label="确认密码" borderBottom prop="form.password2">
					<u-input v-model="form.password2" placeholder="请再次输入新密码" border='none' password />
				</u-form-item>
				<view class="login-btn" @click="submit">修改密码</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import {
		updatePassword
	} from '@/api/login.js'
	export default {
		data() {
			return {
				form: {
					userId: '',
					oldpassword: '',
					password: '',
					password2: '',
				},
				rules: {}
			}
		},
		mounted() {
			this.form.userId = this.$store.state.vuex_info.userId ?? ''
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			// 修改密码
			submit() {
				let _this = this;
				// 校验
				if (!_this.form.oldpassword ||
					!_this.form.password ||
					!_this.form.password2) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				if (_this.form.password !== _this.form.password2) {
					uni.showToast({
						title: '新密码不一致！',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					title: '正在修改...'
				});
				updatePassword(_this.form).then(res => {
					uni.hideLoading();
					if (res.success) {
						uni.showToast({
							title: '修改成功！',
							icon: 'none'
						});
						setTimeout(() => {
							_this.$u.vuex('vuex_pass', null);
							_this.$u.vuex('vuex_info', null);
							_this.$u.vuex('vuex_zidong', null);
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}, 1500)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.login {
		height: 100vh;
		background-color: #F8F8F8;
		// background-image: linear-gradient(45deg, #1D91D7, #32B1BD);

		.login-cont {
			width: 80%;
			background-color: #fff;
			border-radius: 25rpx;
			margin: 0 auto;
			padding: 20rpx 40rpx 160rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		.login-btn {
			width: 95%;
			border-radius: 50rpx;
			text-align: center;
			color: #fff;
			margin: 160rpx auto 0;
			border: 1px solid #eee;
			height: 80rpx;
			line-height: 80rpx;
			padding: 0 10rpx;
			// background: linear-gradient(to right, #32B1BD, #1D91D7);
			background-color: #5FC48D;
			font-size: 32rpx;
		}

		.mine-cell-child {
			height: 20rpx;
		}
	}
</style>